<template>
    <div class="container">

        <!-- 面包屑导航栏 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>帮买取快递废品回收</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        </el-breadcrumb>

        <el-row style="margin-top: 10px;">
            <el-radio-group v-model="radio" @change="showcommodity" size="small">
                <el-radio-button label="全部商品"></el-radio-button>
                <el-radio-button label="上架中"></el-radio-button>
                <el-radio-button label="已下架"></el-radio-button>
            </el-radio-group>
            <!-- <el-button @click="allcommodity" size="mini">全部商品</el-button>
            <el-button @click="aaa" v-model="queryInfo.goodsStatus" size="mini">上架中</el-button>
            <el-button @click="bbb" v-model="queryInfo.goodsStatus" size="mini">已下架</el-button> -->
        </el-row>

        <!-- 模糊搜索框 -->
        <el-row style="margin-top: 10px;">
            <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
                <!-- 商品名称框 -->
                <el-form-item label="商品名称">
                    <el-input clearable @clear="querySearchShopGoodsList" v-model="queryInfo.goodsName"
                        placeholder="请输入商品名称"></el-input>
                </el-form-item>
                <el-form-item label="所属门店">
                    <el-input clearable @clear="querySearchShopGoodsList" v-model="queryInfo.shopName"
                        placeholder="请输入门店名称"></el-input>
                </el-form-item>
                <!-- 时间框 -->
                <el-form-item label="发布日期">
                    <el-date-picker value-format="yyyy-MM-dd hh:mm:ss" v-model="date" type="daterange"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <!-- 搜索框 -->
                <el-form-item>
                    <el-button @click="querySearchShopGoodsList" type="primary">搜索</el-button>
                </el-form-item>
            </el-form>
        </el-row>

        <!-- 表格展示商品信息 -->
        <el-table :data="tableData" border :header-cell-style="{ backgroundColor: '#1890ff', color: '#fff' }"
            style="width: 100%">
            <el-table-column align="center" prop="goodsId" label="商品ID">
            </el-table-column>
            <el-table-column align="center" prop="goodsName" label="商品">
            </el-table-column>
            <el-table-column align="center" prop="goodsShopName" label="所属门店">
            </el-table-column>
            <el-table-column align="center" prop="goodsSalesVolume" label="销量">
            </el-table-column>
            <el-table-column align="center" prop="goodsPresentPrice" label="预估价">
            </el-table-column>
            <el-table-column align="center" prop="addTime" label="发布时间">
            </el-table-column>
            <el-table-column align="center" label="状态">
                <template slot-scope="scope">
                    <el-tooltip content="看什么？没见过文字提示框？" placement="top">
                        <el-button v-if="scope.row.goodsStatus == 1" type="success" size="mini">上架中</el-button>
                        <el-button v-if="scope.row.goodsStatus == 0" type="danger" plain size="mini">已下架</el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-link @click="sxj(scope.row)" v-if="scope.row.goodsStatus == 0" type="primary"
                        :underline="false">上架</el-link>
                    <el-link @click="sxj(scope.row)" v-if="scope.row.goodsStatus == 1" type="primary"
                        :underline="false">下架</el-link>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页按钮-->
        <el-row style="margin-top: 10px;">
            <!-- current-page:要访问的页码 -->
            <!-- page-size：每页展示的条数 -->
            <!-- page-sizes：可选择的每页展示的条数 -->
            <!-- total：数据总条数 -->
            <!-- current-change: 当选择页码时触发的函数 -->
            <!-- size-change： -->
            <el-pagination :current-page="queryInfo.pageNum" :page-sizes="[1, 5, 10, 20]"
                :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </el-pagination>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            queryInfo: {
                pageNum: 1,
                pageSize: 10,
                goodsName: '',
                goodsStatus: '',
                shopName: '',
                startTime: '',
                endTime: '',
            },
            date: null,
            tableData: [],
            total: 1,
            goodsStatus0: 0,
            goodsStatus1: 1,
            radio: '全部商品',  // 商品状态单选框的属性
        }
    },
    methods: {
        // 上下架方法
        sxj(row) {
            if (row.goodsStatus == 1) {
                this.$http.post('goods/modifyShopGoods', {
                    goodsId: row.goodsId,
                    goodsStatus: 0
                })
                    .then(res => {
                        // console.log(res);
                        this.querySearchShopGoodsList()
                    })
            } else if (row.goodsStatus == 0) {
                this.$http.post('goods/modifyShopGoods', {
                    goodsId: row.goodsId,
                    goodsStatus: 1
                })
                    .then(res => {
                        // console.log(res);
                        this.querySearchShopGoodsList()
                    })
            }
        },
        // 展示商品状态，上架中或已下架
        showcommodity() {
            if (this.radio === '全部商品') {
                // 展示全部商品
                this.queryInfo = {
                    pageNum: 1,
                    pageSize: 10,
                    goodsName: '',
                    goodsStatus: '',
                    shopName: '',
                    startTime: '',
                    endTime: '',
                }
                this.querySearchShopGoodsList()
            } else if (this.radio === '上架中') {
                // 展示上架中的商品
                this.queryInfo.goodsStatus = 1
                this.querySearchShopGoodsList()
            } else {
                // 展示下架的商品（不知为何不可用）
                this.queryInfo.goodsStatus = 0
                this.querySearchShopGoodsList()
            }
        },
        // // 展示全部商品
        // allcommodity() {
        //     this.queryInfo = {
        //         pageNum: 1,
        //         pageSize: 10,
        //         goodsName: '',
        //         goodsStatus: '',
        //         shopName: '',
        //         startTime: '',
        //         endTime: '',
        //     }
        //     this.querySearchShopGoodsList()
        // },
        // // 展示上架中的商品
        // aaa() {
        //     this.queryInfo.goodsStatus = 1
        //     this.querySearchShopGoodsList()
        // },
        // // 展示下架的商品（不知为何不可用）
        // bbb() {
        //     this.queryInfo.goodsStatus = 0
        //     this.querySearchShopGoodsList()
        // },
        // 获取所有商品信息
        querySearchShopGoodsList() {
            this.$http.get('goods/querySearchShopGoodsList', {
                params: this.queryInfo
            })
                .then(res => {
                    // console.log(res.data)
                    if (res.data.status == 200) {
                        // console.log(res.data.data.list)
                        this.tableData = res.data.data.list
                        // 动态赋予数据总条数
                        this.total = res.data.data.total
                    } else {
                        this.$message.error('服务器接口异常！')
                    }
                })
                .catch(error => {
                    this.$message.error('服务器接口异常！')
                })
        },
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.queryInfo.pageSize = val
            this.queryInfo.pageNum = 1
            this.querySearchShopGoodsList()
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.queryInfo.pageNum = val
            this.querySearchShopGoodsList()
        }
    },
    mounted() {
        this.querySearchShopGoodsList()
    },
    // 时间搜索侦听器
    watch: {
        // 要求名称必须和变量名保持一致
        date() {
            if (this.date) {
                this.queryInfo.startTime = this.date[0]
                this.queryInfo.endTime = this.date[1]
            } else {
                this.queryInfo.startTime = ''
                this.queryInfo.endTime = ''
            }
        }
    }
}
</script>